<template>
    <div class="room-lease-detail">
        <el-card>
            <!-- 合同基本信息 -->
            <div class="detail-section">
                <h3>基本信息</h3>
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="合同编号">{{ detail.contractNumber }}</el-descriptions-item>
                    <el-descriptions-item label="所属小区">{{ detail.communityName }}</el-descriptions-item>
                    <el-descriptions-item label="房号">{{ detail.roomNumber }}</el-descriptions-item>
                    <el-descriptions-item label="面积">{{ detail.roomArea }}㎡</el-descriptions-item>
                    <el-descriptions-item label="朝向">{{ detail.orientation }}</el-descriptions-item>
                </el-descriptions>
            </div>

            <!-- 租赁信息 -->
            <div class="detail-section">
                <h3>租赁信息</h3>
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="租赁方">{{ detail.leaseCompany }}</el-descriptions-item>
                    <el-descriptions-item label="租赁方联系人">{{ detail.leaseName }}</el-descriptions-item>
                    <el-descriptions-item label="联系电话">{{ detail.leasePhone }}</el-descriptions-item>
                    <el-descriptions-item label="租户">{{ detail.tenantName }}</el-descriptions-item>
                    <el-descriptions-item label="租户电话">{{ detail.tenantPhone }}</el-descriptions-item>
                    <el-descriptions-item label="法定代表">{{ detail.legalRepresentative }}</el-descriptions-item>
                </el-descriptions>
            </div>

            <!-- 合同信息 -->
            <div class="detail-section">
                <h3>合同信息</h3>
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="签订日期">{{ detail.signingDate }}</el-descriptions-item>
                    <el-descriptions-item label="起租日期">{{ detail.startDate }}</el-descriptions-item>
                    <el-descriptions-item label="停租日期">{{ detail.stopDate }}</el-descriptions-item>
                    <el-descriptions-item label="租期">{{ detail.leaseTerm }}个月</el-descriptions-item>
                    <el-descriptions-item label="租金方式">{{ detail.depositName }}</el-descriptions-item>
                    <el-descriptions-item label="收费金额">{{ detail.contractRent }}元</el-descriptions-item>
                </el-descriptions>
            </div>

            <!-- 其他信息 -->
            <div class="detail-section">
                <h3>其他信息</h3>
                <el-descriptions :column="1" border>
                    <el-descriptions-item label="押金说明">{{ detail.depositDescription || '无' }}</el-descriptions-item>
                    <el-descriptions-item label="备注">{{ detail.remarks || '无' }}</el-descriptions-item>
                </el-descriptions>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <el-button @click="handleBack">返回</el-button>
                <el-button type="primary" @click="handleEdit">编辑</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import request from '@/utils/request'

export default {
    name: 'RoomLeaseDetail',
    props: {
        id: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            detail: {}
        }
    },
    created() {
        this.fetchDetail()
    },
    methods: {
        async fetchDetail() {
            try {
                const res = await request.get(`/roomLease/getRoomLeaseDetail?id=${this.id}`)
                if (res.code === 200) {
                    this.detail = res.data
                } else {
                    this.$message.error(res.message || '获取详情失败')
                }
            } catch (error) {
                console.error('获取详情失败:', error)
                this.$message.error('获取详情失败')
            }
        },
        handleBack() {
            this.$router.go(-1)
        },
        handleEdit() {
            this.$router.push({
                name: 'AddRoomLease',
                query: {
                    action: 'edit',
                    id: this.id
                }
            })
        }
    }
}
</script>

<style scoped>
.room-lease-detail {
    padding: 20px;
}

.detail-section {
    margin-bottom: 20px;
}

.detail-section h3 {
    margin-bottom: 15px;
    color: #409EFF;
}

.action-buttons {
    margin-top: 20px;
    text-align: center;
}
</style>
